<template>
  <div class="one">
    <img class="logo" :src="logo" alt="">

    <section class="model">
      <div class="title">平台分红池</div>
      <div class="icon">
        <!-- <img :src="what" alt=""> -->
      </div>
      <h1>即将上线</h1>
    </section>

    <section class="model">
      <div class="title">{{room.name}}</div>
      <div class="icon left">
        <img @click="dialogVisible = true" :src="what" alt="">
      </div>
      <div class="label">
        <div class="triangle"></div>
        凭实力
      </div>
      <p class='text'>{{room.desc}}</p>
      <!-- <p class="text">{{ text1 }}</p>
      <p class="text">{{ text2 }}</p>
      <p class="text">{{ text3 }}</p>
      <p class="text red">{{ text4 }}</p> -->

      <el-button @click="open">开始游戏</el-button>
    </section>

    <section class="model">
      <div class="title">分币</div>
      <div class="label">
        <div class="triangle"></div>
        凭运气
      </div>
      <p class="text">{{ text5 }}</p>
      <p class="text">{{ text7 }}</p>
      <p class="text">{{ text6 }}</p>

      <el-button @click="toLink('https://itobox.io')">开始游戏</el-button>
    </section>

    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false">
      <h3>游戏规则</h3>
      <p>1.回合发起者设置本回合参与人数及参与金额，并创建该回合；
        2.回合发起者进行游戏邀约，参与者进入游戏进行比拼；
        3.当本回合参与人数为10人以内时，回合第一名将拿走奖池90%；
        4.当本回合参与人数为10人以上时，20%的参与者将获得奖励（此处称为获奖者），回合第一名将拿走奖池50%，其余获奖者均分奖池40%；
        5.奖池8%将奖励给回合发起者；
        6.奖池2%将作为平台费用；
        注：
        1.如本回合中所有玩家状态均为异常，则该回合参与金额将原路返回。
        2.如本回合中玩家最终得分相同，则按其跳跃时长进行排名。
      </p>

      <el-button @click="dialogVisible = false">知道了</el-button>
    </el-dialog>
  </div>
</template>

<script>
import logo from '../assets/images/logo.png'
import what from '../assets/images/what.png'
export default {
  name: 'one',
  data () {
    return {
      logo,
      what,
      dialogVisible: false,
      text1: '获胜玩家赢得回合奖池内90%的奖金。',
      text2: '回合参与人数越多，收益越大！',
      text3: '百倍以太收益 看你够不够持久',
      text4: '(8%用于回合发起奖励，2%用于平台费用)',
      text5: '十分钟一回合，运气比拼，',
      text7: '高达60%中奖率。',
      text6: '0.001ETH(2块钱)参与，最高近千倍收益！',
      room: {
        name: '',
        id: '',
        desc: ''
      }
    }
  },
  computed: {
    token () {
      return this.$store.state.token
    },
    user () {
      return this.$store.state.user
    }
  },
  methods: {
    route (r, q) {
      this.$router.push({path: r, query: q})
    },
    toLink (l) {
      window.location.href = l
    },
    open () {
      console.log(this.token.access_token)
      if (!this.token.access_token) {
        this.route('/login')
        return
      }
      this.$store.dispatch('jump/check', {
        ck: this.user.email
      })
        .then(res => {
          if (res.code === 0) {
            this.$store.commit('ROOMID', this.room.id)
            let result = res.result
            if (result.isInAround) { // 已有回合
              this.route('/three', {join: result.aroundId})
            } else {
              this.route('/two', {room: this.room.id})
            }
          }
        })
    }
  },
  async created () {
    if (this.token.access_token) {
      await this.$store.dispatch('getUser', {
        language: 'cn',
        head: 1
      })
    }
    await this.$store.dispatch('jump/getrooms').then(res => {
      this.room.name = res.DATA[0].name
      this.room.desc = res.DATA[0].desc
      this.room.id = res.DATA[0].id
    })

    let aroundId = window.location.href.split('join=')[1]
    if (aroundId) {
      this.route('/three', {join: aroundId})
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variable.scss';

.one {
  .logo {
    display: block;
    position: relative;
    width: 100%;
    z-index: 2;
  }

  .model {
    padding: 30px 20px;
    position: relative;
    margin: -12px 20px 20px;
    border: 4px solid $model-border;
    border-radius: 10px;
    background: $model-bg;
    margin-top: 40px;

    .title {
      // padding: 0 14px;
      width: 150px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      top: -24px;
      line-height: 40px;
      background: $model-btn;
      text-align: center;
      border: 4px solid $model-border;
      border-radius: 10px;
      box-sizing: border-box;
      color: $model-border;
      font-weight: bolder;
    }

    > h1 {
      text-align: center;
      line-height: 60px;
      color: $blue-text;
    }

    &:nth-child(2) {
      margin-top: -12px;
    }

    > .text {
      color: $model-border;
      font-size: 12px;
      font-weight: bold;
      line-height: 20px;
      text-align: left;
    }

    > .red {
      // transform: scale(0.9);
      color: $red;
    }

    > .icon {
      position: absolute;
      right: 20px;
      top: 10px;

      > img {
        width: 20px;
      }

      &.left {
        left: 20px;
        right: auto;
        top: 6px;
      }
    }

    > .label {
      position: absolute;
      right: -24px;
      top: 10px;
      padding: 4px 8px;
      padding-left: 16px;
      background: $model-bg;
      color: $blue-text;
      border: 2px solid $model-border;
      border-right-width: 0;
      font-size: 12px;
      box-shadow: 0 3px 3px #999;

      > .triangle {
        position: absolute;
        left: -10px;
        width: 15px;
        height: 15px;
        border: 2px solid $model-border;
        border-left: none;
        border-bottom: none;
        background: $model-bg;
        transform: rotate(45deg) translateY(-1px);
      }
    }

    > .el-button {
      display: block;
      margin: 10px auto 0;
      background: $btns;
      color: $white;
      border: 2px solid $model-border;
      border-radius: 40px;
      padding: 9px 18px;
    }
  }

  .el-dialog {
    margin-top: 5px !important;
    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding-bottom: 20px;
      line-height: 30px;

      p {
        white-space: pre-line;
      }

      h3 {
        text-align: center;
      }
    }

    .el-button {
      padding: 9px 18px;
      display: block;
      margin: 20px auto 0;
    }
  }
}
</style>
